<template>
    <div>
        <div class="outdiv biaoti">司机管理</div>
        <hr style="height:1px;border: none;border-top:1px solid #ddd;">

        <div class="outdiv">
            <div class="xiajuli clear">
                <div class="leftTopCz lfloat">
                    <div class="search">
                        <el-input style="width: 17rem" v-model="searchDriver"  placeholder="请输入司机姓名或电话" clearable></el-input>
<!--                        <el-button @click="search" type="primary" icon="el-icon-search" size="small">查询</el-button>-->
                        <el-tooltip content="搜索" placement="top">
                            <el-button type="primary" icon="el-icon-search" plain   @click="search" circle></el-button>
                        </el-tooltip>
                        <el-tooltip content="重置" placement="top">
                            <el-button @click="clearSearch" type="danger" plain icon="el-icon-refresh"  circle></el-button>
                        </el-tooltip>
                    </div>

                </div>
                <div class="rfloat">
                    <el-tooltip content="添加司机" placement="top">
                        <el-button type="primary"  plain circle @click="addDriver" icon="el-icon-plus"></el-button>
                    </el-tooltip>
                    <el-tooltip content="导出数据" placement="top">
                        <el-button type="danger" plain circle  icon="el-icon-share" @click="exportExcel"></el-button>
                    </el-tooltip>
                </div>
            </div>
            <!--        表格-->
            <template>
                <el-table @selection-change="SelectionChange" v-loading="loading" element-loading-text="加载中" :data="elTableData" style="width: 100%;">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="driver_id" label="ID" min-width="50"></el-table-column>
                    <el-table-column prop="user_name" label="姓名" min-width="50"></el-table-column>
                    <el-table-column prop="user_phone" label="手机号" min-width="80"></el-table-column>
                    <el-table-column prop="user_idnum" label="身份证号" min-width="100"></el-table-column>
                    <el-table-column prop="license_number" label="车牌号" min-width="70"></el-table-column>
                    <el-table-column prop="quyu" label="所在区域" min-width="100"></el-table-column>
                    <el-table-column prop="user_last_time" label="最后登录时间" min-width="100"></el-table-column>
                    <el-table-column prop="job_status_text" label="在职状态" min-width="50"></el-table-column>
                    <el-table-column prop="vehicle_license_address" label="图片" width="150">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 60px"
                                :src="'http://106.14.247.137:8080'+scope.row.img_address"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-tooltip content="修改" placement="top">
                                <el-button @click="xiuGaiClick(scope.row)" type="primary" icon="el-icon-edit" plain circle size="small"></el-button>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <el-button @click="shangChu(scope.row)" type="danger" icon="el-icon-delete" plain circle size="small"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!--        页码-->
            <div class="fenPage">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[3,10,20]" :page-size=this.pageSize
                    layout="total, sizes, prev, pager, next, jumper" :total=tableData.length>
                </el-pagination>
            </div>

<!--            导出-->
            <el-table :data="XuanZhongData" style="display: none" id="table">
                <el-table-column prop="driver_id" label="ID" min-width="120rem"></el-table-column>
                <el-table-column prop="user_name" label="姓名" min-width="150"></el-table-column>
                <el-table-column prop="user_phone" label="手机号" min-width="150"></el-table-column>
                <el-table-column prop="user_idnum" label="身份证号" min-width="220"></el-table-column>
                <el-table-column prop="license_number" label="车牌号" min-width="180"></el-table-column>
                <el-table-column prop="quyu" label="所在区域" min-width="100"></el-table-column>
                <el-table-column prop="user_last_time" label="最后登录时间" min-width="220"></el-table-column>
                <el-table-column prop="job_status_text" label="在职状态" min-width="100"></el-table-column>
            </el-table>

            <driverManagementForm :title="title" :state="dialogFormVisible" :formData="form" @quxiaotanKuang="quxiao">
            </driverManagementForm>
        </div>
    </div>
</template>

<script>
    import jiangMethod from '../../utils/jiangMethod'
    import * as api from '../../utils/api'
    import driverManagementForm from "../../components/guanli/driverManagementForm";

    import FileSaver from "file-saver";
    import XLSX from "xlsx";
    export default {
        name: "sijiguanli",
        components: {
            driverManagementForm
        },
        data() {
            return {
                loading: true,
                searchDriver: '',
                XuanZhongData:[],

                form: {
                    driver_id: '',
                    img_address: '',
                    job_status: '',
                    license_number: '',
                    region: '',
                    user_id: '',
                    user_last_time: '',
                    user_name: '',
                    user_phone: '',
                    user_pwd: '',
                    user_idnum: '',
                    province_id: '',
                    province_name:'',
                    city_id:'',
                    city_name:'',
                    area_city_id:'',
                    area_name:''
                },
                title: '',

                tableData: [],
                dialogFormVisible: false,

                //分页
                currentPage4: 1,
                elPage: 1,
                pageSize: 3,
            }
        },
        computed: {
            elTableData() {
                let kaiShi = (this.elPage - 1) * this.pageSize
                let jieShu = (this.elPage - 1) * this.pageSize + this.pageSize
                return this.tableData.slice(kaiShi, jieShu)
            }
        },
        created() {
            this.initData(null)
        },
        methods: {
            SelectionChange(val){
                this.XuanZhongData=val
            },
            // 导出
            exportExcel() {
                let wb = XLSX.utils.table_to_book(document.querySelector('#table')); // 这里就是表格
                let wbout = XLSX.write(wb, {
                    bookType: 'xlsx',
                    bookSST: true,
                    type: 'array'
                });
                try {
                    FileSaver.saveAs(new Blob([wbout], {
                        type: 'application/octet-stream'
                    }), 'table.xlsx'); //table是自己导出文件时的命名，随意
                } catch (e) {
                    if (typeof console !== 'undefined')
                        console.log(e, wbout)
                }
                return wbout
            },

            //初始数据
            initData(val) {
                this.loading = true
                this.axios({
                    method: 'get',
                    url: api.queryDriver,
                    params: {
                        userName: val
                    }
                }).then(data => {
                    // console.log(data)
                    if (data.data.code === 200) {
                        this.elPage = 1
                        this.tableData = data.data.data
                        this.tableData.map(item => {
                            item.img_address = item.img_address.substring(1)
                            if (item.job_status === 0) {
                                item['job_status_text'] = '离职'
                            } else {
                                item['job_status_text'] = '在职'
                            }

                            item['quyu']=item.province_name+'/'+item.city_name+'/'+item.area_name
                        })
                    }else {
                        this.$message({
                            type: 'error',
                            message: data.data.msg
                        })
                    }
                    this.loading = false
                })
            },

            clearSearch(){
                this.$message({
                    showClose: true,
                    type: "success",
                    message: '重置数据中'
                })
                this.searchDriver = ''
                this.initData(null)
            },
            search() {
                if (jiangMethod.yanzheng(this.searchDriver)) {
                    this.initData(this.searchDriver)
                    this.$message({
                        type: 'success',
                        message: '查询成功'
                    })
                } else {
                    this.$message({
                        type: 'success',
                        message: '查询失败'
                    })
                }
            },

            addDriver() {
                this.title = '添加司机信息'
                this.dialogFormVisible = true
            },
            xiuGaiClick(val) {
                // console.log(val)
                this.form = {
                    ...val
                }
                this.title = '修改司机信息'
                this.dialogFormVisible = true
            },
            shangChu(val) {
                // console.log(val)
                if (val.job_status === 0) {
                    this.axios({
                        method: 'post',
                        url: api.delDriver,
                        data: {
                            userId: val.user_id
                        }
                    }).then(data => {
                        // console.log(data)
                        this.$message({
                            type: 'success',
                            message: data.data.msg
                        })
                        this.initData(null)
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '删除失败,该人员处于在职状态'
                    })
                }
            },


            quxiao() {
                this.initData(null)
                this.dialogFormVisible = false
                this.form = {
                    driver_id: '',
                    img_address: '',
                    job_status: '',
                    license_number: '',
                    user_id: '',
                    user_last_time: '',
                    user_name: '',
                    user_phone: '',
                    user_pwd: '',
                    user_idnum: '',
                    province_id: '',
                    province_name:'',
                    city_id:'',
                    city_name:'',
                    area_city_id:'',
                    area_name:'',
                    region: '',
                }
            },

            // 每页显示条数
            handleSizeChange(val) {
                this.pageSize = val
            },
            // 当前页码
            handleCurrentChange(val) {
                this.elPage = val
            }
        }
    }
</script>

<style lang="less" scoped>
    .leftTopCz {
        // float: left;
        // text-align: left;
        // margin: 0 0 2rem;

        .search {
            /*border: 1px solid red;*/
            // margin: 2rem 0;

            .el-input {
                width: 20rem;
                // border: 1px solid deepskyblue;
                margin-right: 2rem;
            }
        }
    }

    .fenPage {
        text-align: center;
        margin: 4rem 0 0 0;
    }
</style>